<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 最简单的html标签+js 百度功能
        抖动 三缸机器
    -->
    <input type="text" id="undebounce" autofocus placeholder="请输入您要搜索的内容">
    <button id="btn">btn</button>
    <button id="cancel">取消搜索事件绑定</button>
    <script>
        window.onload=function(){
            const input=document.querySelector('#undebounce');
            const cancel=document.getElementById('cancel');
            const btn=document.getElementById('btn');
            const consoleOne=()=>{console.log('one');}
            const consoleTwo=()=>{console.log('two');}
            const consoleThree=()=>{console.log('three');}
            btn.addEventListener('click',consoleOne)
            btn.addEventListener('click',consoleTwo)
            btn.addEventListener('click',consoleThree)
            /*
            * @func 搜索功能
            * @params {content:string} 关键字
            * @return 返回结构列表
            */
           function doInput(event){
               let keyword=event.target.value;
               // 能封装就封装 解耦
                // 如果流程性代码超过10行，一定封装
                // 搜索比较复杂 封装能力
                // 应该放在外面，
               ajax(keyword);
           }
            function ajax(content){
                console.log('准备实时搜索'+content);
            }
            input.addEventListener('input',doInput)
            input.addEventListener('keydown',function(event){
                if(event.keyCode==13){
                    console.log('搜索吧');
                }
            })
            cancel.addEventListener('click',function(){
                input.removeEventListener('input',doInput);
                btn.removeEventListener('click',consoleOne);
            })
        }
    </script>
</body>
</html>